<template>
  <div>
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      </el-col>

      <!--列表-->
      <template>
        <el-table :data="permissionRoleList" highlight-current-row style="width: 100%;">


          <el-table-column prop="id" label="角色id" >
          </el-table-column>

          <el-table-column prop="name" label="角色名称" >
          </el-table-column>
          <el-table-column prop="sn" label="角色sn" >
          </el-table-column>

<!--          操作按钮-->

          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" @click="update(scope.row)" style="color: orange">修改</el-button>
              <el-button  type="text" size="small" @click="empower(scope.row)" style="color: deepskyblue">授权</el-button>
              <el-button  type="text" size="small" @click="delObj(scope.row)" style="color: red">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </section>
<!--    授权弹出框-->


    <el-dialog title="授权" :visible.sync="showPermission" :append-to-body="true" @open="open" >
      <el-tree
          :data="data"
          node-key="sn"
          @check-change="choseNode"
          :default-expanded-keys="['Department:add', 'Department:deleteBatch']"
          :default-checked-keys="list"
          show-checkbox
          :props="defaultProps">
      </el-tree>
      <el-button @click="authority">确认授权</el-button>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "permissionRole",
  data(){
    return{
      //角色所拥有的权限id
      list:[],
      hasPermissionIds:[],
      chosePermissionList:[],
      showPermission:false,
      roleId:null,
      data:[],
      permissionRoleList:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    axios.get('http://localhost:8080/api/role/findAll').then(resp=>{
      if (resp.data.code==200){
        this.$message({
          message:resp.data.msg,
          type:'success'
        })
        this.permissionRoleList=resp.data.data;
      }
      else this.$message({
        message:resp.data.msg,
        type:'error'
      })
    })
    //
  },
  methods:{
    //授权
    authority(){
      if (this.hasPermissionIds==null||this.hasPermissionIds.length==0){
        this.$message({
          message:"请勾选要赋予的权限信息",
          type:'error'
        })
        return false;
      }
      //提交权限
      axios({
        method:'post',
        url:'http://localhost:8080/api/permissionRole/add/'+this.roleId,
        data:this.hasPermissionIds
      }).then(resp=>{
        if (resp.data.code==200) {
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
        this.showPermission=false;
      })
    },
    choseNode(sourceObj,nodeDom){
      if (nodeDom){
        this.hasPermissionIds.push(sourceObj.sn)
      }
      else {
        for (let i = 0; i < this.hasPermissionIds.length; i++) {
          if (this.hasPermissionIds[i]==sourceObj.sn){
            //移除该元素
            this.hasPermissionIds.splice(i,1)
          }
        }
      }
    },
    //授权
    empower(row){
      this.list=null;
      this.roleId=row.id;
      this.showPermission=true;
    },
    open(){
      //加载权限树
      axios.get('http://localhost:8080/api/permission/findAllTree')
          .then((resp)=>{
            if (resp.data.code==200){
              this.$message({
                message:resp.data.msg,
                type:'success'
              })
              this.data=[resp.data.data];
              //查询角色本神拥有的权限信息
              axios.get('http://localhost:8080/api/permissionRole/findRoleHasPermission?roleId='+this.roleId).then((resp)=>{
                if (resp.data.code==200){
                  this.$message({
                    message:resp.data.msg,
                    type:'success'
                  })
                  //得到该角色所拥有的权限信息
                  this.list=resp.data.data;

                }
              })

            }

          })
    }
  }
}
</script>

<style scoped>

</style>